<template>
  <view>
    <view style="margin:10px;padding: 5px;font-size: small;border-radius: 5px;border: #161823 solid 1px;">
      <view style="font-size: unset;width: 100%;text-align: center;font-weight: bold;">各平台差异</view>
      <view>1.H5平台可以直接使用VUE的echarts图表组件，效果更好</view>
      <view>2.小程序平台使用的是uuchart组件（根据echarts适配而来）</view>
      <view>3.APP平台使用echarts图表有些问题</view>
    </view>
    <!-- #ifdef MP-WEIXIN -->
    <view class="ver-layout-center wx-card">
      <button class="login-wx" type="primary" size="mini" @tap="getWeRunData">获取微信运动数据</button>
      <view v-if="methodList.length" class="method-card ver-layout">
        <view class="ver-layout-center">执行的方法顺序：</view>
        <view v-for="(item,index) in methodList" :key="index" class="method-view">
          {{ item }}
        </view>
      </view>
    </view>
    <we-run-chart v-if="methodList.length" :run-data="stepInfoList"></we-run-chart>
    <!-- #endif -->
  </view>
</template>

<script>
import WeRunChart from '@/components/uchart/werun-chart/index.vue'

export default {
  components: {
    WeRunChart
  },
  data() {
    return {
      methodList: [],
      loginInfo: {},
      sessionKey: '',
      stepInfoList: []
    }
  },
  onLoad() {
  },
  methods: {
    async getWeixinCode() {
      return uni.login({provider: 'weixin'})
    },
    async loginByWeixinApi(code) {
      return uniCloud.callFunction({
        name: 'user-center',
        data: {
          action: 'loginByWeixin',
          params: {code}
        }
      })
    },
    async authorizeWxrunPermission() {
      return uni.authorize({scope: 'scope.werun'}).then(res => {
        return wx.getWeRunData()
      })
    },
    async getWeRunDataApi(authorRes) {
      return uniCloud.callFunction({
        name: 'com-power',
        data: {
          action: 'wxData',
          iv: authorRes.iv,
          sessionKey: this.sessionKey,
          encryptedData: authorRes.encryptedData
        }
      })
    },
    async getWeRunData() {
      try {
        this.methodList.push('第一步：执行uni.login({provider: \'weixin\'})方法')
        let [, {code}] = await this.getWeixinCode()
        console.log("getWeRunData1", code)
        this.methodList.push('第二步：执行uniCloud>user-center>loginByWeixin方法')
        let serverLoginRes = await this.loginByWeixinApi(code)
        console.log("getWeRunData2", serverLoginRes)
        this.loginInfo = serverLoginRes.result
        this.sessionKey = serverLoginRes.result.sessionKey
        this.methodList.push('第三步：执行uni.authorize({scope: \'scope.werun\'})方法')
        this.methodList.push('第四步：执行wx.getWeRunData()方法(小程序内部方法)')
        let authorRes = await this.authorizeWxrunPermission()
        console.log("getWeRunData3", authorRes)
        this.methodList.push('第五步：执行uniCloud>com-power>wxData方法')
        let weRunData = await this.getWeRunDataApi(authorRes)
        this.methodList.push('获取stepInfoList数据成功！')
        console.log("getWeRunData4", weRunData)
        this.stepInfoList = weRunData.result.stepInfoList
      } catch (e) {
        this.$tools.showModal('微信登录失败，请稍后再试！')
      }
    }
  }
}
</script>

<style>
.login-wx {
}

.wx-card {
  /*margin: 10px 20px;*/

}

.method-card {
  border-radius: 7px;
  background: lightgrey;
  padding: 10px;
  margin: 10px;
  font-size: 13px;
}

.method-view {
  color: red;
}
</style>
